<template>
    <div>
        <div ref="Pie" :style="styleClass" element-loading-text="获取数据中" element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(255, 255, 255, 0.8)"></div>
    </div>
</template>
<script setup lang='ts'>
import { onMounted, onBeforeUnmount, reactive, getCurrentInstance } from 'vue';

//***引入
import * as echarts from 'echarts';
import { object, array } from 'vue-types';

const props = defineProps({
    styleClass: {
        type: Object,
        default: false
    },

    chartData: {
        type: Array<any>,
        default: false
    },
    chartTitle: {
        type: String,
        default: ''
    }



});

const data = reactive(props.chartData)


let myChart: any = null


const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const initChart = () => {
    let Pie = proxy?.$refs.Pie
    // @ts-ignore
    //  基于准备好的dom，初始化echarts实例
    myChart = echarts.init(Pie);
    // 指定图表的配置项和数据
    let option = {
        grid: {
            left: '8%',
            right: '5%',
            bottom: 50,
            top: 10,
            containLabel: true,
        },
        tooltip: {
            trigger: 'axis', //axis , item
            // backgroundColor: 'RGBA(0, 49, 85, 1)',
            // borderColor: 'rgba(0, 151, 251, 1)',
            // textStyle: {
            //    color: '#BCE9FC',
            //    // fontSize: this.$fontSize(0.16),
            //    align: 'left',
            // },
            // formatter: function (params) {
            //    return params[0].name + '<br/>' + params[0].seriesName + ' : ' + params[0].value;
            // },
        },
        // backgroundColor: '#002D54',
        xAxis: {
            type: 'value',
            splitLine: {
                lineStyle: {
                    color: 'rgba(77, 128, 254, 0.2)',
                    type: 'line',
                },
            },
            axisTick: {
                show: true,
            },

            axisLabel: {
                //  改变x轴字体颜色和大小
                show: true,
                color: '#00c0fa',
                fontSize: '12',
            },
        },
        yAxis: [
            {
                type: 'category',
                inverse: true,
                axisLabel: {
                    show: true,
                    color: '#2a77ea',
                    fontSize: '12',
                },
                splitLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                data: ['泉山区', '鼓楼区', '贾汪区', '丰县', '沛县', '新沂市'],
            },
        ],
        series: [
            {
                name: '道路指数',
                type: 'bar',
                zlevel: 1,
                label: {
                    show: true,
                    position: 'right', // 位置
                    color: '#00c0fa',
                    fontSize: 14,
                    distance: 10 // 距离
                    // formatter: '{c}%' // 这里是数据展示的时候显示的数据
                }, // 柱子上方的数值
                itemStyle: {
                    borderRadius: 0,
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                        {
                            offset: 0,
                            color: '#2a77ea',
                        },
                        {
                            offset: 1,
                            color: '#00c0fa',
                        },
                    ]),
                },
                barWidth: 10,
                data: [270, 189, 157, 112, 89, 78],
            },
        ],
    };
    option && myChart.setOption(option);

    let currentIndex = 0;
    let timer: any = 0;

    const animate = () => {
        timer = setInterval(function () {
            var dataLen = option.series[0].data.length;
            // 取消之前高亮的图形
            myChart.dispatchAction({
                type: 'downplay',
                seriesIndex: 0,
                dataIndex: currentIndex,
            });
            currentIndex = (currentIndex + 1) % dataLen;
            // 高亮当前图形
            myChart.dispatchAction({
                type: 'highlight',
                seriesIndex: 0,
                dataIndex: currentIndex,
            });
        }, 2500);
    }
    // animate();
    myChart.on("mouseover", function (e: any) {
        clearInterval(timer);
        // 取消之前高亮的图形
        myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
        });
        myChart.dispatchAction({
            type: 'highlight',
            dataIndex: e.dataIndex
        });
    });

    myChart.on("mouseout", function (e: any) {
        currentIndex = e.dataIndex;
        // animate();
    });
}



window.addEventListener("resize", () => {
    myChart.resize()
});

//*** 挂载Echarts
onMounted(() => {
    initChart()
})

onBeforeUnmount(() => {
    window.removeEventListener('resize', () => {
        myChart.resize()
    });
    // ResizeListener.uninstall(myChart)
})



</script>